<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>体育项目</title>
    <script src="../../res/js/jquery-3.4.1.min.js"></script>
    <script src="../../res/layui/layui.js"></script>
    <script src="../../res/js/Tools.js"></script>
    <script src="../../res/js/base.js"></script>
    <script src="../../js/login_common.js"></script>
    <link rel="stylesheet" href="../../res/layui/css/layui.css">

</head>
<body>



<table id="demo" lay-filter="test"></table>

<script>



    var table2 = null;
    var form = null;
    layui.use(['table','form'], function() {
        var table = layui.table;

        form = layui.form;

        //第一个实例
        table2 = table.render({
            elem : '#demo',
            height : 550,
            toolbar : '#toolbarDemo',

            url: getRootPath() + 'AtsBaseSportController/selectAll',
            page : true //开启分页
            ,
            cols : [ [ //表头
                {
                    type : 'checkbox',
                    fixed : 'left'
                }, {
                    field : 'sportId',
                    title : '项目ID',
                    width : 150
                }, {
                    field : 'sportName',
                    title : '项目名称',
                    width : 200
                }, {
                    field : 'sportExp',
                    title : '项目说明',
                    width : 200
                }, {
                    field : 'action',
                    title : '操作',
                    width : 190,
                    toolbar : "#barDemo"
                } ] ]

        });

        //监听工具条
        table.on('tool(test)', function(obj) {

            var data = obj.data;
            if (obj.event === 'detail') {


            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function(index) {
                    //删除数据在这里可以使用Ajax异步  就和平常使用一样简单
                    $.post(getRootPath() + "AtsBaseSportController/updateIsva", {
                        sportId : data.sportId
                    }, function(ret) {
                        if (ret.num == 1) {
                            layer.msg(ret.msg, {
                                icon : 1,
                                time : 1500
                            }, function() {
                                table2.reload();
                                //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            });
                        } else {
                            layer.msg(ret.msg, {
                                icon : 2,
                                time : 1500
                            });
                        }
                    }, "json");
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type : 2,
                    title : '体育项目编辑',
                    shadeClose : true,
                    shade : 0.8,
                    area : [ '700px', '68%' ],
                    content: 'AtsBaseSportFrom.html?sportId='+data.sportId, //iframe的url
                    end : function() {
                    }
                });
            }

        });


        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'deleteAllBut':
                    layer.confirm('您真的要删除吗', function(index) {
                        var data = checkStatus.data;
                        var ids = "";
                        $.each(data, function(index, item) {
                            ids += item.sportId + ",";
                        });
                        var  url= getRootPath() + 'AtsBaseSportController/deleteAll'; //数据接口
                        var datas = {
                            ids : ids
                        };
                        $.post(url, datas, function(obj) {
                            layer.msg(obj.msg);
                            table2.reload();//刷新表格
                        }, "json");
                    });
                    break;
                case 'addBut':
                    layer.open({
                        type : 2,
                        title : '体育项目编辑',
                        shadeClose : true,
                        shade : 0.8,
                        area : [ '700px', '68%' ],
                        content: 'AtsBaseSportFrom.html?sportId=', //iframe的url
                        end : function() {
                        }
                    });
                    break;
                case 'seachTable':

                    var sportName = $("#sportName").val();
                    alert(sportName);
                    table2.reload({
                        url: getRootPath() + 'AtsBaseSportController/selectAll',
                        where: {
                            sportName: sportName

                        },
                        page: { curr: 1 }
                    });

                    $("#sportName").val(sportName);
                    break;
            }
        });
    });




</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>

<script type="text/html" id="toolbarDemo">
    <div>


        <div class="layui-inline">
            <input class="layui-input" name="sportName" id="sportName"
                   autocomplete="off" placeholder="项目名称">
        </div>


        <button class="layui-btn layui-btn-sm"  lay-event="seachTable">搜索</button>
        <button class="layui-btn layui-btn-sm" lay-event="deleteAllBut">删除选中数据</button>
        <button class="layui-btn layui-btn-sm"  lay-event="addBut">增加数据</button>
    </div>
</script>
</body>
</html>